<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8" session="false"%>
<%
	String path = request.getContextPath();
	pageContext.setAttribute("path", path);
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Home</title>
<!-- ExtJS 样式 -->
<link rel="stylesheet" type="text/css"
	href="${path}/script/extjs-3.2.1/resources/css/ext-all.css" />
<!-- 先引入底层驱动，一般用ext自己的，如果要使用jquery的，还要先引入jquery库 -->
<script type="text/javascript"
	src="${path}/script/extjs-3.2.1/adapter/ext/ext-base.js"></script>
<!-- ExtJs all -->
<script type="text/javascript" src="${path}/script/extjs-3.2.1/ext-all.js"></script>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<script type="text/javascript">
Ext.onReady(function(){
	// example下有很多grid示例
	// 加载Store数据源：jsonStore等等，column列模型
	var data = [[1, '1', 'http://www.163.com', new Date()], [2, '2', '2', new Date()]];
	// 数组数据源按照顺序对应field
	var store = new Ext.data.ArrayStore({
		data: data,
		fields: ["id", "name", "url", "vdate"]
	});
	var grid = new Ext.grid.GridPanel({
		title: "标题",
		store: store,
		height: 200,
		columns: [
		    // column
			{header:"名称", dataIndex:"name", sortable: true},
			{header:"网址", dataIndex:"url", sortable: true, renderer: function(v){ return v.link(v);}}
		]
	});
	grid.render("d1");

	// 可编辑表格
	var grid1 = new Ext.grid.EditorGridPanel({
		title: "标题",
		store: store,
		height: 200,
		columns: [
		    // 双击编辑
			{header:"名称", dataIndex:"name", sortable: true, editor: new Ext.form.TextField()},
			{header:"网址", dataIndex:"url", sortable: true, renderer: function(v){ return v.link(v);}},
			// date类，格式定义比较特殊
			{header:"日期", dataIndex:"vdate", sortable: true, editor: new Ext.form.DateField(), renderer: function(v){ return v.format("Y-m-d");} }
		]
	});
	grid1.render("d2");

	// 属性编辑
	var grid2 = new Ext.grid.PropertyGrid({
	    title: 'Properties Grid',
	    autoHeight: true,
	    width: 300,
	    source: {
	        "name": "My Object",
	        "Created": new Date(Date.parse('10/15/2006')),
	        "Available": false,
	        "Version": .01,
	        "Description": "A test object"
	    }
	});
	grid2.render("d3");

});
</script>
</body>
</html>
